import React, { Component } from "react";
import styles from "./index.module.scss";
import { Card, Checkbox, Button, Form, Input, message } from "antd";
import logo from "../../assets/logo.png";
import { login } from "api/login";
export default class index extends Component {
  // 登录请求
  onFinish = async values => {
    try {
      console.log(values);
      let res = await login(values);
      localStorage.setItem("geek-pc", JSON.stringify(res));
      const { state } = this.props.history;
      if (state) {
        this.props.history.push(state.from);
        console.log(22);
      } else {
        this.props.history.push("/home");
        console.log(11);
      }
      message.success("登陆成功！");
    } catch (error) {
      message.error("亲，账号密码不对喲~");
    }
  };
  render() {
    return (
      <div className={styles.login}>
        <Card className="login-container">
          <img src={logo} alt="" className="logo"></img>
          {/* 表单 */}
          <Form
            name="basic"
            size="large"
            validateTrigger={["onChange", "onBlur"]}
            initialValues={{ mobile: "13911111111", code: "246810", remember: true }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="mobile"
              rules={[
                {
                  pattern: /^1[3-9]\d{9}$/,
                  message: "手机号码格式不对",
                },
                { required: true, message: "请输入手机号" },
              ]}
            >
              <Input placeholder="请输入手机号" />
            </Form.Item>
            <Form.Item
              name="code"
              rules={[
                {
                  pattern: /^\d{6}$/,
                  message: "密码长度为6位",
                },
                { required: true, message: "请输入验证码" },
              ]}
            >
              <Input.Password placeholder="请输入验证码" />
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
              rules={[
                {
                  validator(_, value) {
                    if (value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error("请勾选协议"));
                  },
                },
              ]}
            >
              <Checkbox>我已阅读并同意[用户协议]和[隐私条款]</Checkbox>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" block>
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }
}
